<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="./iconfont/iconfont.css">
	<!-- 购买右边 -->
	<link rel="stylesheet" href="./css/huawei7.css">
	<!-- 购买左边 -->
	<link rel="stylesheet" href="./css/huawei8.css">
	<!-- 放大镜 -->
	<link rel="stylesheet" href="./css/huawei9.css">

	<!-- 页头 导航 轮播图css -->
	<link rel="stylesheet" href="./css/top.css">
	<!-- 栏目1css -->
	<link rel="stylesheet" href="./css/column2.css">
	<!-- 底部 -->
	<link rel="stylesheet" href="./css/bottom.css">
	<!-- 公用 -->
	<link rel="stylesheet" href="./css/joint.css">
	<title>华为详情</title>
	<style>
	/* 初始化 */
		body,ul,li{margin: 0;padding:0;}
		li{list-style: none;}
		a{text-decoration: none;}
		body{font-size: 14px; font-family: 微软雅黑; background: #fff; min-width: 1200px;}
	</style>
</head>
<body>
	<div id="header">
		<div class="content">
			<div class="content-left">
				<ul>
					<li><a href="./华为.html">首页</a></li>
					<li><a href="">华为官网</a></li>
					<li><a href="">荣耀官网</a></li>
					<li><a href="">花粉俱乐部</a></li>
					<li><a href="">V码(代购码)</a></li>
				</ul>
			</div>
			<div class="content-right">
				<ul>
					<li><a id="enroll">请登录</a></li>
					<li><a id="login">注册</a></li>
					<li><a href="">荣耀官网</a></li>
					<div class="cart">
						<span class="iconfont">&#xe622;</span>
						购物车( 
						<input type="text" value="0" id="cartnum" class="cart-0" >
						)
						<div class="cart-list"></div>
					</div>
				</ul>
			</div>

		</div>
	</div>
	<!-- 导航 -->
	<div id="nav" >
		<div class="content">
			<div class="logo"></div>
			<div class="column">
				<ul>
					<li>
					<a href="">手机</a>
					<div class="submenu"></div>
					</li>
					<li>
					<a href="">笔记本电脑</a>
					<div class="submenu"></div>
					</li>
					<li>
					<a href="">平板&穿戴</a>
					<div class="submenu"></div>
					</li>
					<li>
					<a href="">智能家居</a>
					<div class="submenu"></div>
					</li>
					<li>
					<a href="">配件</a>
					<div class="submenu"></div>
					</li>
				</ul>
			</div>
			<div class="search">
				<form action="">
					<input type="text" class="search-text">
					<input type="submit" class="search-btn iconfont" value="&#xe620;">
				</form>
			</div>
		</div>
	</div>
	<div class="hr-7"></div>
	<div id="nav2">
		<div class="details">
			<a href="./华为.html">首页</a>
				&nbsp;>&nbsp;
			<a href="">手机</a>
				&nbsp;>&nbsp;
			<a href="">HUAWEI Mate系列</a>
				&nbsp;>&nbsp;
			<a href="">HUAWEI Mate 20 6GB+64GB 全网通版（亮黑色）</a>
				&nbsp;>&nbsp;
		</div>
	</div>
	<div class="hr-8"></div>
	<!-- 中间 -->
	<div id="nav3">
		<div class="homepage">
			<!-- 中间左边 -->
			<div class="left">
				<div class="top" id="small">					
					<img src="./img/phone.png" width="480" height="480"
					id="img10">
					<div class="MP4"></div>
					<div id="zoom"></div>			
				</div>
				<div id="big">
					<img src="./img/phone.png" id="img11">
				</div>
				<div class="bottom">
					<a class="bottom-left" id="left2"><span class='iconfont'>&#xe633;</span></a>
					<div class="rolling">
						<ul>
							<li>
								<img src="./img/rolling-1.png" >
								<div class="rolling1" id="rolling10"></div>
							</li>
							<li>
								<img src="./img/rolling-2.png">
								<div class="rolling1" id="rolling20"></div>
							</li>
							<li>
								<img src="./img/rolling-3.png">
								<div class="rolling1" id="rolling30"></div>
							</li>
							<li>
								<img src="./img/rolling-4.png">
								<div class="rolling1" id="rolling40"></div>
							</li>
							<li>
								<img src="./img/rolling-5.png">
								<div class="rolling1" id="rolling50"></div>
							</li>
						</ul>
					</div>
					<a class="bottom-right" id="right2"><span class='iconfont'>&#xe634;</span></a>
				</div>
			</div>
			<!-- 中间右边 -->
			<div class="right">
				<div class="pro-name">
					<h1>HUAWEI Mate 20 6GB+64GB 全网通版（亮黑色）</h1>
					<div class="product-slogan">
						<a href="">【老用户购机尊享一年官方碎屏险】华为感恩季，购机即赠小天鹅蓝牙音箱，享6期免息，老用户专属购机通道点击购买>>>></a>
						<span>麒麟980新一代人工智能芯片，6.53英寸珍珠屏，超高屏占比，超微距影像，超大广角徕卡三摄旗舰手机</span>
					</div>
					<div class="product-info">
						<div class="product-info-price">
							<span>价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</span>
							<div class="pro-price">
								<em>¥</em>
								3999.00
							</div>
						</div>
						<div class="product-info-price1">
								<span>促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</span>
								<div class="pro-price1">
									<div class="pro-price1-1">
										<em class="tag">赠品</em>
										<div class="pro-price1-img">
											<a href=""><img src="./img/pro-price1-1img.png" width="30" height="30"></a>
										</div>										
										<a href="" class="pro-price1-over">
											选择&nbsp;&nbsp;>
										</a>
									</div>
									<div class="pro-price1-2">
										<em class="tag">分期免息</em>
										<span>花呗、掌上生活、农行分期支付可享免息 </span>
									</div>
									<div class="pro-price1-3">
										<em class="tag">赠送积分</em>
										<span>购买即赠商城积分，积分可抵现~ </span>
									</div>
								</div>
							</div>
						</div>	
					<div class="hr-11"></div>
					<div class="service">
						<div class="service-1">服务说明</div>
						<div class="service-2">
							<p>已满48元已免运费&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;由华为商城负责发货，并提供售后服务</p>
						</div>
					</div>
					<div class="service">
						<div class="service-1">商品编码</div>
						<div class="service-2">
							<p>2601010066901</p>
						</div>
					</div>
					<div class="hr-12"></div>
					<div class="hr-13"></div>
					<div class="fashion">
						<div class="fashion1">选择颜色</div>
						<div class="fashion2">
							<ul>
								<li id="fashion2list1">
									<a href="">
										<img src="./img/fashion2-1.png">
										<span>亮黑色</span>
									</a>
								</li>
								<li id="fashion2list2">
									<a href="">
										<img src="./img/fashion2-2.png">
										<span>宝石蓝</span>
									</a>
								</li>
								<li id="fashion2list3">
									<a href="">
										<img src="./img/fashion2-3.png">
										<span>樱粉金</span>
									</a>
								</li>
								<li id="fashion2list4">
									<a href="">
										<img src="./img/fashion2-4.png">
										<span>翡冷翠</span>
									</a>
								</li>
								<li id="fashion2list5">
									<a href="">
										<img src="./img/fashion2-5.png">
										<span>极光色</span>
									</a>
								</li>
							</ul>
						</div>
					</div>
					<div class="fashion-1">
						<div class="fashion1">选择版本</div>
						<div class="fashion2">
							<ul>
								<a href=""><li id="fashion2list6">
									<span>全网通 6GB+64GB</span>
								</li></a>
								<a href=""><li id="fashion2list7">
									<span>全网通 6GB+128GB</span>
								</li></a>
							</ul>
						</div>
					</div>
					<div class="fashion-2">
						<div class="fashion1">选择套餐</div>
						<div class="fashion2">
							<ul>
								<a href=""><li id="fashion2list8"><span>单品</span></li></a>
								<a href=""><li id="fashion2list9"><span>贴心守护</span></li></a>
								<a href=""><li id="fashion2list10"><span>超级车充</span></li></a>
								<a href=""><li id="fashion2list11"><span>储存无忧</span></li></a>
								<a href=""><li id="fashion2list12"><span>照片速印</span></li></a>
								<a href=""><li id="fashion2list13"><span>尽享时光</span></li></a>
							</ul>
						</div>
					</div>
					<div class="fashion-3">
						<div class="fashion1">推荐</div>
						<div class="fashion2">
							<ul>
								<a href=""><li id="fashion2list14">
									<span>HUAWEI Mate 20 智能视窗保护套</span>
								</li></a>
								<a href=""><li id="fashion2list15">
									<span>HUAWEI Mate 20 硅胶保护壳</span>
								</li></a>
								<a href=""><li id="fashion2list16">
									<span>HUAWEI Mate 20 皮革保护壳</span>
								</li></a>
								<a href=""><li id="fashion2list17">
									<span>华为备咖储存</span>
								</li></a>
							</ul>
						</div>
					</div>
					<div class="fashion-4">
						<div class="fashion1">已选择商品:</div>
						<div class="fashion2">亮黑色 / 全网通 6GB+64GB / 官方标配 / 单品 /&nbsp;单品</div>
					</div>
					<div class="fashion-5">
						<div class="fashion1">
							<input type="text" value="1" id="num" placeholder="1">
							<input type="text" id="add" value="+" class="buy2"  readonly="true"> 
							<input type="text" id="minus" value="-" class="buy1" readonly="true">
						</div>
						<div class="fashion2">
							<ul>
								<li id="fashion2list18">加入购物车</li>
								<li id="fashion2list19">立即下单</li>
							</ul>
						</div>
					</div>
						
				
				</div>

			</div>
		</div>
	</div>

	<!-- 底部 -->
	<div id="hr-5"></div>
	<div class="footer">
		<div class="slogan">
			<ul>
				<li class="s1">
					<a href="">
						<i></i>
						百强企业 &nbsp;品质保证
					</a>
				</li>
				<li class="s2">
					<a href="">
						<i></i>
						7天退货 &nbsp;15天换货
					</a>
				</li>
				<li class="s3">
					<a href="">
						<i></i>
						48元起免运费
					</a>
				</li>
				<li class="s4">
					<a href="">
						<i></i>
						1000家维修网点 &nbsp;全国联保
					</a>
				</li>
			</ul>
		</div>
	</div>
	<div class="href">
		<div class="href-content">
			<div class="f1">
				<dl>
					<dt>
						<p class="title">购物相关</p>
					</dt>
					<dd>
						<ol>
							<li><a href="">购物指南</a></li>
							<li><a href="">配送方式</a></li>
							<li><a href="">支付方式</a></li>
							<li><a href="">常见问题</a></li>
						</ol>
					</dd>
				</dl>
				<dl>
					<dt>
						<p class="title">保修与退换货</p>
					</dt>
					<dd>
						<ol>
							<li><a href="">保修政策</a></li>
							<li><a href="">退换货政策</a></li>
							<li><a href="">退换货流程</a></li>
							<li><a href="">保修状态查询</a></li>
							<li><a href="">配件防伪查询</a></li>
						</ol>
					</dd>
				</dl>
				<dl>
					<dt>
						<p class="title">维修与技术支持</p>
					</dt>
					<dd>
						<ol>
							<li><a href="">售后网点</a></li>
							<li><a href="">预约维修</a></li>
							<li><a href="">手机寄售</a></li>
							<li><a href="">备件价格查询</a></li>
							<li><a href="">上门服务</a></li>
						</ol>
					</dd>
				</dl>
				<dl>
					<dt>
						<p class="title">特色服务</p>
					</dt>
					<dd>
						<ol>
							<li><a href="">防伪查询</a></li>
							<li><a href="">补购保障</a></li>
							<li><a href="">以旧换新</a></li>
							<li><a href="">礼品包装</a></li>
						</ol>
					</dd>
				</dl>
				<dl>
					<dt>
						<p class="title">关于我们</p>
					</dt>
					<dd>
						<ol>
							<li><a href="">公司介绍</a></li>
							<li><a href="">华为商城简介</a></li>
							<li><a href="">华为线下门店</a></li>
							<li><a href="">荣耀线下门店</a></li>
							<li><a href="">诚征人才</a></li>
							<li><a href="">意见反馈</a></li>
						</ol>
					</dd>
				</dl>	
			</div>
			<div class="f2">
				<dt><p class="title">400-088-6888</p></dt>
				<dd>
					<a>7x24小时客服热线（仅收市话费）</a>
				</dd>
				<dd>
					<ol>
						在线客服
					</ol>
				</dd>
			</div>
		</div>
	</div>
<script src="./js/jquery-1.8.3.min.js"></script>

<!-- 小图触碰显示大图 -->
<script src="./js/huawei2.js"></script>
<!-- 放大镜 -->
<script src="./js/huawei3.js"></script>
	
</body>
</html>